<template>
  <div class="login-wrap">
    <div class="logo-box">
      <div class="logo">
        <img :src="require('@/assets/logo.png')" alt="" />
      </div>
      <div class="logo-title">物资供应管控平台</div>
    </div>
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="account"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- type="password" -->
        <van-field
          v-model="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" @click="onSubmit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
  
  <script>
import { ref } from "vue";
import {
  Toast,
  Form as VanForm,
  Field as VanField,
  Button as VanButton,
  CellGroup as VanCellGroup,
} from "vant";
import axios from "axios";
import { prexUrl } from "util/index.js";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  components: { VanForm, VanField, VanButton, VanCellGroup },
  name:"login",
  setup() {
    const   router=useRouter()
    const account = ref("13002589212");
    const password = ref("longnows!@#");
    const menuCode = ref("goldenStar2");
    const accessToken = ref("");

    const  store = useStore()

    const onSubmit = (values) => {
      if (!account.value || !password.value) {
        return false;
      }

      Toast.loading({
        duration: 0,
        message: "登录中...",
        forbidClick: true,
        loadingType: "spinner",
      });

      store.dispatch("login",{
        account: account.value,
          password: password.value,
          menuCode: menuCode.value,
          captchaKey: "",
      }).then(data=>{
        if(data){
          router.push({
            path: "/rpt-ct",
            query:{
              token:data.accessToken
            }
          })
        }else{
          Toast.fail(data.msg)
        }
      }).finally(()=>{
        Toast.clear()
      })

      console.log("submit", values);
    };

    return {
      account,
      password,
      onSubmit,
    };
  },
};
</script>
  
  <style>
.login-wrap {
  padding: 20px 0px;
}
.logo-box {
  text-align: center;
  padding-top: 30%;
  margin-bottom: 30px;
}
.logo {
  width: 100%;
  min-height: 180px;
  margin-bottom: 20px;
}
.logo img {
  width: 55%;
  height: auto;
  text-align: center;
}
.logo-title {
  text-align: center;
  font-size: 28px;
  color: #333;
}
</style>
  
  